<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>
<body>
<div id="app">
    <p>指令:v-bind、v-html、v-if、v-show、v-for、v-on</p>
    <p>v-bind:给属性绑定数据的</p>
    <p>v-html:将html原生直接展示</p>
    <p>v-if:if判断</p>
    <h1 v-if="true">v-if测试</h1>
    <span style="background-color: aqua" v-if="isOk">isOk....</span>
    <p>v-if .. else:用的时候 需要在一起用 中间不能有其他的标签</p>
    <h1 v-if="age >= 18"> 成年人 </h1>
    <!--<h1>中间给个其他标签</h1> Template compilation error: v-else/v-else-if has no adjacent v-if or v-else-if.-->
    <h1 v-else> 未成年人 </h1>

    --------------------------------------------<br/>
    <h1>v-if...else if ... else if ...else ...</h1>
    <h1 v-if="age >= 60 ">老年人</h1>
    <h1 v-else-if="age >= 40">中年人</h1>
    <h1 v-else-if="age >= 25">青年人</h1>
    <h1 v-else-if="age >= 18">成年人</h1>
    <h1 v-else>儿童青少年</h1>
    ---------------------------------------------<br/>
    <h1>v-show标签:和v-if不同的是通过display来控制是否展示</h1>
    <h1 v-show="isOk">这里是v-show测试</h1>
    <h1 v-show="!isOk">这里是v-show测试</h1>
</div>
</body>

<script>
    const { createApp } = Vue

    createApp({
        data() {
            return {
                isOk:false,
                age:35
            }
        }
    }).mount('#app')


</script>

</html>